import React, { useEffect, useRef } from 'react';
import { VncScreen, VncScreenHandle } from 'react-vnc';

interface VncComponentProps {
  url: string; // VNC 服务器的 WebSocket 地址
  className?: string; // 新增 className 属性
  style: React.CSSProperties; // 新增 style 属性
  
}

const VncClientModel: React.FC<VncComponentProps> = ({ url, className, style }) => {
  const vncScreenRef = useRef<VncScreenHandle>(null);

  useEffect(() => {
    const vncScreen = vncScreenRef.current;
    return () => {
      console.log('Stopping VNC connection');
      if (vncScreen) {
        vncScreen.disconnect();
      }
    };
  }, []);

  return (
    <div className={className}>
      <VncScreen
        ref={vncScreenRef}
        url={url}
        style={style}
      />
    </div>
  );
};

export default VncClientModel;